<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-18 14:36:00
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2023-01-10 11:47:53
 * @Description: 部门列表
 * @FilePath: \tuanfeng-mini\src\pages\departments.vue
-->
<template>
    <div class="container">
        <template v-if="!loading && list.length">
            <div class="search">
                <u-search v-model="name" :clearabled="true" placeholder="请输入部门关键字" action-text="查找" @change="change" @search="change"></u-search>
            </div>
            <div class="item" v-for="item in searchList">
                <div class="left" @click="toDetail(item)">
                    <div class="name">{{item.name}}</div>
                    <!-- <div class="phone">咨询电话：{{item.telePhone}}</div> -->
                </div>
                <div class="right">
                    <!-- <div class="phone" @click="call(item.telePhone)">
                        <u-icon color="#0c92ff" name="phone" :size="40"></u-icon>
                    </div>-->
                    <div class="star" @click="collect(item)">
                        <u-icon color="#ffde00" :name="item.isCollect ? 'star-fill' : 'star'" :class="{active: item.isCollect}" :size="40"></u-icon>
                    </div>
                </div>
            </div>
            <div class="item tip" @click="openDocument('https://tuanfeng.whkxzj.com/profile/static/20230107203154-团风县依申请和公共服务事项清单.pdf')">《团风县县乡村三级依申请及公共服务事项清单（目录）》, 点击查看详情</div>
        </template>
        <Empty v-if="!loading && !list.length"></Empty>
    </div>
</template>
<script>
import Empty from "../components/Empty.vue";
import { mapState, mapMutations, mapActions } from "vuex";
import { getDeptAPI } from "../api/department";
import { collectAPI, cancelCollectAPI } from "../api/collection";

export default {
    components: { Empty },
    data() {
        return {
            loading: false,
            name: "",
            list: [],
            searchList: [],
        };
    },
    computed: {
        ...mapState(["openId"]),
    },
    onShareAppMessage() {},
    onShow() {
        this.loading = true;
        wx.showLoading({
            title: "加载中...",
        });
        getDeptAPI({ openId: this.openId }).then((res) => {
            this.list = [...res.data];
            this.searchList = [...res.data];
            wx.hideLoading();
            this.loading = false;
        });
    },
    methods: {
        openDocument(url) {
            wx.showLoading({
                title: "打开文件中...",
            });
            wx.downloadFile({
                url,
                success: function (res) {
                    const filePath = res.tempFilePath;
                    wx.openDocument({
                        filePath: filePath,
                        success: function (res) {
                            wx.hideLoading();
                            console.log("打开文档成功");
                        },
                    });
                },
            });
        },
        toPage(url, params) {
            this.$u.route({ url, params });
        },
        change(value) {
            console.log(value);
            this.searchList = this.list.filter((item) => {
                return item.name.indexOf(value) !== -1;
            });
        },
        toDetail(item) {
            if (this.openId) {
                // 新增浏览记录
                collectAPI({
                    openId: this.openId,
                    pid: item.id,
                    type: 0,
                    name: item.name,
                    path: "pages/dept_detail",
                    param: {
                        title: item.name,
                    },
                }).then((res) => {});
            }

            this.$u.route({
                url: "pages/dept_detail",
                params: {
                    id: item.id,
                    title: item.name,
                },
            });
        },
        call(phone, e) {
            wx.makePhoneCall({
                phoneNumber: phone,
            });
        },
        collect(item) {
            if (!this.openId) {
                wx.showToast({
                    title: "请先登录",
                    icon: "none",
                });
                return false;
            }

            if (item.isCollect) {
                // 取消收藏
                cancelCollectAPI({
                    openId: this.openId,
                    pid: item.id,
                    type: 1,
                }).then((res) => {
                    item.isCollect = !item.isCollect;
                });
            } else {
                // 收藏
                collectAPI({
                    openId: this.openId,
                    pid: item.id,
                    type: 1,
                    name: item.name,
                }).then((res) => {
                    item.isCollect = !item.isCollect;
                });
            }
        },
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";

.container {
    min-height: 100vh;
    background-color: #fafafa;
    box-sizing: border-box;
    padding: 15px;
    box-sizing: border-box;
    padding-top: 70px;
    .search {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding: 10px 15px;
        background-color: #fff;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
        box-sizing: border-box;
        z-index: 2;
    }
    .item {
        padding: 15px 0;
        display: flex;
        border-radius: 8px;
        background-color: #fff;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
        .left {
            flex: auto;
            padding-left: 15px;
            display: flex;
            align-items: center;
            .name {
                font-size: 15px;
                font-weight: bold;
                // margin-bottom: 8px;
                color: #0c92ff;
            }
            .phone {
            }
        }
        .right {
            width: 70px;
            flex: none;
            display: flex;
            justify-content: center;
            align-items: center;
            .phone {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 40px;
                height: 40px;
            }
            .star {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 40px;
                height: 40px;
                .active {
                    color: #0c92ff;
                }
            }
        }
    }
    .tip {
        color: #0c92ff;
        font-size: 15px;
        font-weight: bold;
        padding-left: 10px;
        padding-right: 10px;
    }
}
</style>